<template>
  <li 
    :class="[
      'bx-submenu',
      {
        'bx-submenu--open': isOpen,
        'bx-submenu--disabled': disabled
      }
    ]"
  >
    <div 
      class="bx-submenu__title"
      @click="handleTitleClick"
    >
      <div class="bx-submenu__content">
        <BxIcon v-if="icon" :name="icon" class="bx-submenu__icon" />
        <span class="bx-submenu__text">
          <slot name="title">{{ title }}</slot>
        </span>
      </div>
      <BxIcon 
        :name="isOpen ? 'chevron-up' : 'chevron-down'"
        class="bx-submenu__arrow"
      />
    </div>
    
    <div 
      v-show="isOpen"
      class="bx-submenu__content-wrapper"
    >
      <ul class="bx-submenu__content-list">
        <slot></slot>
      </ul>
    </div>
  </li>
</template>

<script>
import { ref, computed, inject } from 'vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxSubMenu',
  components: {
    BxIcon
  },
  props: {
    key: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const menu = inject('bx-menu', {})
    const isOpen = ref(menu.openKeys?.includes(props.key) || false)

    const handleTitleClick = () => {
      if (props.disabled) return
      
      isOpen.value = !isOpen.value
      menu.handleOpenChange?.(props.key, isOpen.value)
    }

    return {
      isOpen,
      handleTitleClick
    }
  }
}
</script>

<style scoped>
.bx-submenu {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bx-submenu--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bx-submenu__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: all var(--bx-transition-medium);
  border-radius: var(--bx-radius-small);
  margin: 2px;
}

.bx-submenu__title:hover {
  background: var(--bx-glass-bg-hover);
}

.bx-submenu__content {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-sm);
  flex: 1;
}

.bx-submenu__icon {
  font-size: 16px;
  color: var(--bx-text-secondary);
  flex-shrink: 0;
}

.bx-submenu__text {
  color: var(--bx-text-primary);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-submenu__arrow {
  font-size: 12px;
  color: var(--bx-text-tertiary);
  transition: transform var(--bx-transition-medium);
}

.bx-submenu--open .bx-submenu__arrow {
  transform: rotate(180deg);
}

.bx-submenu__content-wrapper {
  overflow: hidden;
  transition: all var(--bx-transition-medium);
}

.bx-submenu__content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--bx-spacing-lg);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--bx-radius-small);
  margin: 0 2px 2px 2px;
}

/* 水平模式 */
.bx-menu--horizontal .bx-submenu {
  display: inline-block;
  position: relative;
}

.bx-menu--horizontal .bx-submenu__content-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  border: 1px solid var(--bx-glass-border);
  border-radius: var(--bx-radius-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.bx-menu--horizontal .bx-submenu__content-list {
  padding-left: 0;
  background: transparent;
  margin: 0;
}

/* 折叠模式 */
.bx-menu--collapsed .bx-submenu__text {
  display: none;
}

.bx-menu--collapsed .bx-submenu__arrow {
  display: none;
}

.bx-menu--collapsed .bx-submenu__title {
  justify-content: center;
  padding: 12px 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-submenu__title {
    padding: 10px 12px;
  }
  
  .bx-submenu__text {
    font-size: 13px;
  }
  
  .bx-submenu__icon {
    font-size: 14px;
  }
}
</style>

